<!--  -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>上传文件测试</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="//mirror.fe80.cn/layui/2.6.8/css/layui.css"  media="all">
        <style media="screen">
        .layui-progress {
            border-radius: 2px;
        }
        .layui-progress-bar {
            border-radius: 2px;
        }
        </style>
    </head>
    <body>
        <div class="layui-container">
            <blockquote class="layui-elem-quote">您可以选择任何图片，上传至COS，然后在列表中查看您刚刚上传的图片。</blockquote>

            <div class="layui-progress layui-progress-big" lay-filter="demo">
                <div class="layui-progress-bar" lay-percent="0%"></div>
            </div>

            <span id="demoText"></span>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>常规使用：普通图片上传</legend>
            </fieldset>

            <div class="layui-upload">
                <button type="button" class="layui-btn" id="test1">上传图片</button>
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="demo1">
                </div>
            </div>
        </div>
    </body>
<script src="/static/store/cos/cos-js-sdk-v5.js"></script>
<script src="//mirror.fe80.cn/layui/2.6.8/layui.js" charset="utf-8"></script>
<script>
var Bucket = 'cq-1252015630';
var Region = 'ap-chongqing';
layui.use(['form','upload','element'],function(){
    var form = layui.form, $=layui.jquery, upload = layui.upload, element = layui.element;

    // 初始化实例
    var cos = new COS({
        getAuthorization: function (options, callback) {
            $.post('https://i.fe80.cn/tools/sdk/sts.html',{},function(data){
                callback({
                    TmpSecretId: data.credentials && data.credentials.tmpSecretId,
                    TmpSecretKey: data.credentials && data.credentials.tmpSecretKey,
                    XCosSecurityToken: data.credentials && data.credentials.sessionToken,
                    ExpiredTime: data.expiredTime,
                });
            });
        }
    });

    cos.options.ProgressInterval = 1; //上传刷新时间

    //绑定文件域
    upload.render({
        elem: '#test1',
        // exts:'jpg|png|gif|bmp|jpeg',
        accept: 'file',
        auto: false,
        size: 4096,
        choose: function(obj){
            /**
             * index 得到文件索引
             * file 得到文件对象
             * result 得到文件base64编码，比如图片
             */
            obj.preview(function(index, file, result){
                cos.putObject({
                    Bucket: Bucket,
                    Region: Region,
                    Key: 'images/' + file.name,
                    StorageClass: 'STANDARD',
                    Body: file,
                    onProgress: function(progressData) {
                        console.log(JSON.stringify(progressData));
                        var per = Math.floor(progressData.percent * 100) + '%';
                        $('#demoText').text('上传进度：'+per);
                        element.progress('demo', per);
                    }
                }, function(err, data) {
                    if(data && data.statusCode){
                        layer.msg("上传成功",{icon:1});
                    }
                    if(err){
                        console.log(err);
                        layer.msg("上传失败",{icon:2});
                    }
                });
            });
        }
    });
});
</script>
</html>
